<template>
	<view class="pages">
		<view class="container">
			<!-- header -->
			<com-head textTit="收货地址" :typeVal="1" :scrollTop="scrollTop"></com-head>
			
			<view class="main">
				<view class="main-view" v-for="(item, index) in receiverList">
					<view class="main-view-main" @click="updateFun(item, index)">
						<view class="site"><text>收货人：{{item.realname}}</text><text>{{item.phone}}</text></view>
						<view class="title">
						<span v-for="row in item.area">{{row.area_name}}</span>   
						  {{item.address}}</view>
						<view class="footers">
							<view class="footers__left" @click.stop="defaultFun(item)">
								<image v-if="item.is_default == 0" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xuanzhong.png"></image>
								<image v-else src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/good2.png"></image>
								默认地址
							</view>
							<view class="footers__right">
								<text @click="updateFun(item)">编辑</text>
								<text @click.stop="delFun(item)">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="empty" style="text-align: center; margin-top: 146rpx;" v-if="receiverList.length < 1">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" style="width: 256rpx;height: 176rpx;"></image>
				<view style="font-size: 24rpx;color: #AFB5BF; padding: 70rpx 0 80rpx 0;">暂无收货地址</view>
			</view>
			
			<view class="footer">
				<view @tap="jump('/pages/mine/take/submit')">新增地址</view> 
			</view>
			
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		components: {

		},

		data() {
			return {
				getArea: [],
				receiverList: [],
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onShow: function() {
			// uni.showLoading({
			// 	title: '正在加载中'
			// });
			this.receiverListFun()
		},
		methods: {
			async defaultFun(item) {
				let {data,code} = await this.$u.api.defaultAddress({
					id: item.id
				});
				if(code){
					this.toast('设置成功')
					this.receiverListFun()
				}
			},
			async receiverListFun() {
				let {data,code} = await this.$u.api.getAddress();
				if(code){
					this.receiverList = data
				}
			},
			// 编辑
			updateFun(item, i) {
				uni.setStorageSync('address', item)
				this.jump('/pages/mine/take/submit?item='+ JSON.stringify(item))
			},
			delFun(item, i) {
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除地址吗？',
					confirmColor: "#32C2B3",
					success: async (e) => {
						if (e.confirm) {
							let {data,code} = await this.$u.api.delAddress({id: item.id});
							if(code){
								this.receiverList = data
								this.receiverListFun()
							}
							// receiverDel(item.id).then((res) => {
							// 	if (res.code > 0) return
							// 	this.toast('删除成功')
							// 	this.receiverListFun()
							// })
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
		width: 100%;
		height: 100%;
		background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.container{
		padding: 50rpx 32rpx;
	}
	.main{
		margin-top: 10rpx;
		&-view{
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			background: white;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			// padding: 24rpx;
			border-bottom: 2rpx solid #F5F6F7;
			&:last-child{
				border-bottom: none;
			}
			&-main{
				width: 100%;
				margin-left: 16rpx;
				.title{
					font-size: 24rpx;
					color: #666666;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #EDEDED;
				}
				.site{
					display: flex;
					font-size: 28rpx;
					color: #333333;
					text{
						flex: 1;
						&:last-child{
							text-align: right;
						}
					}
				}
				.default{
					display: inline-block;
					width: 72rpx;
					height: 36rpx;
					background: #32C2B3;
					border-radius: 6rpx;
					color: white;
					line-height: 36rpx;
					text-align: center;
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					position: relative;
					top: -3rpx;
				}
				.footers{
					display: flex;
					margin-top: 25rpx;
					&__left{
						flex: 1;
						font-size: 24rpx;
						color: #666666;
						image{
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
							position: relative;
							top: 5rpx;
						}
					}
					&__right{
						flex: 1;
						text-align: right;
						font-size: 24rpx;
						color: #999999;
						text{
							&:last-child{
								color: #007664;
								margin-left: 15rpx;
							}
						}
					}
				}
			
			}
		}
	}

	.footer{
		width: 100%;
		height: 130rpx;
		margin-top: 100rpx;
		view{
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(135deg, #50DCC2 0%, #007664);
			border-radius: 60rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82rpx;
			margin: 24rpx auto 0;
		}
	}

</style>